<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size: 9pt;
	}
	
	#panel1{
		border: 1px #000000 solid;
		line-height: 400px;
		font-size: 100px;
		width: 400px;
		height: 400px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<script>
	var timerId=0;
	var number;
	var panel1;
	var random = function(num){
		return Math.round(Math.random()*num)+1;
	}
	
	var timer = function(){
		timerId = setInterval(print,20);
	}
	
	var print = function(){
		panel1 = document.getElementById("panel1");
		number = random(document.getElementById("lab_total").value);
		panel1.innerHTML = number;	
		panel1.style.fontSize = (random(100)+100)+"px";
	}
	
	var stop = function(){
		if(timerId!==0){
			clearInterval(timerId);
		}
		
		panel1.style.color="red";
		panel1.style.fontSize="250px";
		
	}
	
	window.onload =function(e){
		var startBtn = document.getElementById("btnStart");
		var stopBtn = document.getElementById("btnStop");
		
		startBtn.onclick=function(e){
			timer();
		}
		
		stopBtn.onclick=function(e){
			stop();
		}
	}
</script>
</head>
<body>
	<div>
		<h4>경품추첨기</h4>
		<div  id="panel1"></div>
		<div id="nav">
			참여인원:<input type="text" id="lab_total" value="100"></input>
			<button id="btnStart">start</button>
			<button id="btnStop">stop</button>
		</div>
	</div>
</body>
</html>